<template>
  <div class="article">
    <Header></Header>
    <div class="article-icons">
      <el-row>
        <el-col>
          <el-button class="article-icons-img">
            <icon-svg iconClass="collection"></icon-svg>
          </el-button>
        </el-col>
        <el-col>
          <el-link :underline="false" type="info" class="article-icons-word">740 收藏</el-link>
        </el-col>
        <el-col>
          <el-button class="article-icons-img">
            <icon-svg iconClass="thumb" style="margin-top: -5px"></icon-svg>
          </el-button>
        </el-col>
        <el-col>
          <el-link :underline="false" type="info" class="article-icons-word">520 点赞</el-link>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="12" :offset="4">
        <el-card class="box-card">
          <el-row>
            <el-col class="main-col">
              <el-link type="danger" :underline="false"
                       style="font-size: 28px;font-weight: 700;word-break: break-word;">
                这部堪称国外的《色戒》 权游的梅姨比汤唯更加大胆
              </el-link>
              <el-col class="main-col">
                <el-row>
                  <el-col :span="2">
                    <el-avatar :size="50" style="margin-left: 20px;"></el-avatar>
                  </el-col>
                  <el-col :span="18" :offset="1">
                    <el-row>
                      <el-col>
                        <div class="clearfix">
                          <el-link>鲁朗电音漫谈</el-link>
                          <el-button class="button-gz">关注</el-button>
                        </div>
                      </el-col>
                      <el-col>
                        <div class="clearfix">
                          <i class="el-icon-star-on"></i>
                          <el-link>92</el-link>
                          <el-link>2019.10.15 22:44:31</el-link>
                          <el-link>字数 3,534</el-link>
                          <el-link>阅读 49,558</el-link>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-col>
            <el-col>
              这里显示的是正文，OK
            </el-col>
            <el-col style="margin-top: 20px;">
              <el-row>
                <el-col>
                  <div style="display: flex;justify-content: center;align-content: center;">
                    <el-link :underline="false" style="margin-right: 5px;"><i class="el-icon-document-copy"></i></el-link>
                    <el-link>风一样的男子</el-link>
                    <el-dropdown>
                      <el-button class="el-dropdowm-link" style="width: 40px;height: 40px;border-radius: 50%;margin-left: 5px;"><i class="el-icon-more" style="margin-left: -7px;"></i></el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a">分享文章</el-dropdown-item>
                        <el-dropdown-item command="b">收入专题</el-dropdown-item>
                        <el-dropdown-item command="c">收藏文章</el-dropdown-item>
                        <el-dropdown-item command="d">举报文章</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col>
              <el-divider></el-divider>
            </el-col>
            <el-col>
              <div style="display: flex;justify-content: center;align-content: center;">
                <el-link :underline="false" style="margin: 40px;font-size: 16px">"创作不易，请我喝杯茶吧"</el-link>
              </div>
            </el-col>
            <el-col>
              <div style="display: flex;justify-content: center;align-content: center;">
                <el-button type="danger" style="width: 100px;border-radius: 50px;">赞赏支持</el-button>
              </div>
            </el-col>
            <el-col>
              <div style="display: flex;justify-content: center;align-content: center;margin-top: 20px;">
                <el-avatar :size="25" style="margin-left: -10px;"></el-avatar>
                <el-avatar :size="25" style="margin-left: -10px;"></el-avatar>
                <el-avatar :size="25" style="margin-left: -10px;"></el-avatar>
                <el-avatar :size="25" style="margin-left: -10px;"></el-avatar>
                <el-link :underline="false" style="margin-left: 8px;">共有4人赞赏</el-link>
              </div>
            </el-col>
            <el-col>
              <div class="clearfix"
                   style="display: flex;justify-content: center;align-content: center;margin-top: 40px;background-color: #fafafa;">
                <el-row>
                  <el-col :span="2" :offset="1">
                    <el-avatar :size="50"></el-avatar>
                  </el-col>
                  <el-col :span="18">
                    <el-link><b style="font-size: 16px;">邹祝家</b>&nbsp;&nbsp;努力将技术文章写成通俗易懂的“言情小说” 微信公众号：前端呼啦圈（Love-FED
                    </el-link>
                    <el-link :underline="false" disabled style="color: #969696;font-size: 12px;">总资产359
                      (约35.02元)共写了3.0W字获得1,937个赞共1,150个粉丝
                    </el-link>
                  </el-col>
                  <el-col :span="2">
                    <el-button class="button-gz" style="position: absolute;top:25%;margin: auto;">关注</el-button>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" style="height: auto;margin-top: 20px;">
          <el-container>
            <el-header style="height: 190px;">
              <el-row>
                <el-col>
                  <div class="clearfix">
                    <el-avatar :size="50" style="line-height: 520px"></el-avatar>
                    <el-input v-model="comment" style="width: 60%;margin-left: 1%;" type="textarea" placeholder="请输入内容"
                              maxlength="500" show-word-limit>
                    </el-input>
                  </div>
                </el-col>
                <el-col style="margin-top: 50px;">
                  <el-row>
                    <el-col :span="8" :offset="3">
                      <el-popover
                        placement="left"
                        trigger="hover">
                        <VEmojiPicker style="background-color: #fff;border: 0px;" :pack="pack" @select="selectEmoji"/>
                        <el-button type="danger" class="article-emoji" slot="reference">
                          <icon-svg iconClass="emoji"></icon-svg>
                        </el-button>
                      </el-popover>
                    </el-col>
                    <el-col :span="6">
                      <el-button
                        style="color: #fff;background-color: #ec7259;border-color: #ec7259;border-radius: 50px;">发布
                      </el-button>
                      <el-button style="border-radius: 50px;">取消</el-button>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-header>
            <el-main>
              <el-row>
                <el-col>
                  <el-divider class="article-divider" direction="vertical" style="width: 3px;"></el-divider>
                  <el-link :underline="false" type="danger" style="font-weight: 700;font-size: 20px;margin-right: 15px">
                    全部评论
                  </el-link>
                  <el-link>49</el-link>
                  <el-button class="button-gz">只看作者</el-button>
                </el-col>
                <el-col style="margin-top: 20px" v-for="index in i" :key="index">
                  <el-row>
                    <el-col :span="3">
                      <el-avatar :size="50" style="margin-left: 20px;"></el-avatar>
                    </el-col>
                    <el-col :span="18">
                      <el-row>
                        <el-col>
                          <div class="clearfix">
                            <el-link style="font-size: 16px;">鲁朗电音漫谈</el-link>
                          </div>
                        </el-col>
                        <el-col>
                          <div class="clearfix">
                            <el-link>14楼</el-link>
                            <el-link>2017.03.26 18:34</el-link>
                          </div>
                        </el-col>
                        <el-col style="margin-top: 20px;">
                          <el-link style="font-size: 16px" :underline="false">写的很好</el-link>
                        </el-col>
                        <el-col style="margin-top: 20px;">
                          <div class="clearfix">
                            <icon-svg iconClass="thumb" style="width: 1em;height: 1em;"></icon-svg>
                            <el-link :underline="false">点赞</el-link>
                            <icon-svg iconClass="reply" style="width: 1em;height: 1em;margin-left: 10px"></icon-svg>
                            <el-link :underline="false">回复</el-link>
                          </div>
                        </el-col>
                        <el-col>
                          <el-divider></el-divider>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col></el-col>
                    <el-col></el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-main>
          </el-container>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card class="box-card">
          <el-row>
            <el-col :span="5">
              <el-avatar :size="50"></el-avatar>
            </el-col>
            <el-col :span="16">
              <el-row>
                <el-col>
                  <div class="clearfix">
                    <el-link style="font-size: 14px;">鲁朗电音漫谈</el-link>
                    <el-button class="button-gz">关注</el-button>
                  </div>
                </el-col>
                <el-col>
                  <div class="clearfix">
                    <el-link style="font-size: 11px;color: #969696;">总资产359 (约35.02元)</el-link>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="margin-bottom: -16px;">
              <el-divider></el-divider>
            </el-col>
            <el-col>
              <el-row v-for="index of i" :key="index" style="margin-top: 16px;">
                <el-col>
                  <el-link
                    style="font-size: 14px;line-height: 22px;overflow: hidden;text-overflow: ellipsis;margin-bottom: 4px;">
                    React Native 混合开发与实现
                  </el-link>
                </el-col>
                <el-col>
                  <el-link :underline="false" style="font-size: 12px;color: #969696;">略读量 {{index}}</el-link>
                </el-col>
              </el-row>
              <el-row style="margin-top: 16px;">
                <el-col>
                  <el-link
                    style="font-size: 14px;line-height: 22px;overflow: hidden;text-overflow: ellipsis;margin-bottom: 4px;">
                    React Native 混合开发与实现
                  </el-link>
                </el-col>
                <el-col>
                  <el-link :underline="false" style="font-size: 12px;color: #969696;">略读量 74</el-link>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <el-row>
            <el-col>
              <el-divider class="article-divider" direction="vertical"></el-divider>
              <el-link :underline="false" type="danger" style="font-weight: 700;font-size: 16px;margin-right: 15px">
                推荐阅读
              </el-link>
            </el-col>
            <el-col>
              <el-row v-for="index in i" :key="index">
                <el-col style="margin-top: 16px;">
                  <el-link
                    style="font-size: 14px;line-height: 22px;overflow: hidden;text-overflow: ellipsis;margin-bottom: 4px;">
                    React Native 混合开发与实现
                  </el-link>
                </el-col>
                <el-col>
                  <el-link :underline="false" style="font-size: 12px;color: #969696;">略读量 {{index}}</el-link>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import Header from '../components/header.vue'
  import '../icons/collection.svg'
  import '../icons/thumb.svg'
  import '../icons/emoji.svg'
  import '../icons/reply.svg'
  import VEmojiPicker from 'v-emoji-picker'
  import packData from 'v-emoji-picker/data/emojis.json'

  export default {
    name: 'login',
    components: {
      Header,
      VEmojiPicker
    },
    data: () => ({
      pack: packData,
      publicPath: process.env.BASE_URL,
      comment: '',
      i: 5
    }),
    created () {
    },
    mounted () {

    },
    watch: {},

    methods: {
      selectEmoji (emoji) {
        console.log(emoji)
        this.comment = this.comment + emoji.emoji
      }
    }
  }
</script>

<style lang="scss">
  .article {
    font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-feature-settings: 'tnum';
    font-variant: tabular-nums
  }

  .article-icons {
    position: fixed;
    top: 216px;
    left: calc((100vw - 1000px) / 2 - 78px);
    user-select: none;
    width: 50px;
  }

  .article-icons-word {
    width: 70px;
    margin: 8px auto;
  }

  .article-icons-img {
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    margin-left: 10px !important;
  }

  .svg-icon {
    margin-left: -10px;
  }

  .main-col {
    margin: 10px auto !important;
  }

  .clearfix:before,
  .clearfix:after {
    clear: both;
  }

  .clearfix .el-link {
    margin: 0 5px;
  }

  .button-gz {
    width: auto;
    height: 26px;
    border-radius: 50px !important;
    padding: 2px 7px !important;
    margin-left: 10px !important;
    color: #ec7259 !important;
    background-color: #fef8f7 !important;
    border-color: #ec7259 !important;
  }

  .article-emoji {
    padding: 5px 10px !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
  }

  .article-emoji .svg-icon {
    margin-left: -5px !important;
  }

  .article-divider {
    width: 3px !important;
    background-color: #F92A82 !important;
  }

  .box-card {
    margin: 10px;
  }
</style>
